<template>
  <div>
    <button @click="changeState('A')">A</button>
    <button @click="changeState('B')">B</button>
    <button @click="changeState('C')">C</button>

    <keep-alive>
      <!-- tab 切换 -->
      <KeepAliveStageA v-if="state === 'A'" />
      <!-- v-show -->
      <KeepAliveStageB v-if="state === 'B'" />
      <KeepAliveStageC v-if="state === 'C'" />
    </keep-alive>
  </div>
</template>

<script>
import KeepAliveStageA from "./KeepAliveStateA";
import KeepAliveStageB from "./KeepAliveStateB";
import KeepAliveStageC from "./KeepAliveStateC";

export default {
  components: {
    KeepAliveStageA,
    KeepAliveStageB,
    KeepAliveStageC
  },
  data() {
    return {
      state: "A"
    };
  },
  methods: {
    changeState(state) {
      this.state = state;
    }
  },
  beforeCreate() {
    console.log("index beforeCreate");
  },
  created() {
    // eslint-disable-next-line
    console.log("index created");
  },
  beforeMount() {
    console.log("index beforeMount");
  },
  mounted() {
    // eslint-disable-next-line
    console.log("index mounted");
  },
  beforeUpdate() {
    // eslint-disable-next-line
    console.log("index before update");
  },
  updated() {
    // eslint-disable-next-line
    console.log("index updated");
  },
  beforeDestroy() {
    console.log("index beforeDestroy");
  },
  destroyed() {
    console.log("index destroyed");
  }
};
</script>